<template>
  <form>
    <p>
      <label for="name">name</label>
      <input id="name" type="text" v-model="form.name" />
    </p>
    <p>
      <label for="category">category</label>
      <input id="category" type="text" v-model="form.category" />
    </p>
    <p>
      <label for="price">price</label>
      <input id="price" type="number" v-model.number="form.price" />
    </p>
  </form>
</template>

<script>
import { useVModel } from '@vueuse/core'

export default {
  name: 'ProductForm',
  props: {
    modelValue: Object,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const form = useVModel(props, 'modelValue', emit)
    return {
      form,
    }
  },
}
</script>

<style scoped lang="scss">
form {
  display: flex;
  flex-direction: column;
  gap: 8px;

  p {
    margin: 0;
    padding-left: 200px;
    position: relative;
    text-align: start;

    label {
      display: block;
      width: 200px;
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      line-height: 32px;
      text-align: right;
      padding-right: 8px;
      font-weight: bold;
    }

    input {
      width: 400px;
    }
  }
}
</style>
